<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- <link rel="icon" href=""> -->
  <title>足迹</title>
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link rel="stylesheet" href="/css/format.css">
    <link rel="stylesheet" href="/layui/layui.css">
    <style>
      body{
        background: #fff;
      }
      /*底部导航*/
      .footer_nav_container{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        /*border-top: 1px solid #ececec;*/
        box-shadow: 0px 0px 3px #ececec;
        background: #fff;
      }
      .footer_nav_container{
        display: flex;
        align-items: center;
      }
      .footer_nav_container li{
        flex: 1;
        padding: 10px 0;
        list-style: none;
      }
      .footer_nav_container a{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .footer_nav_container li svg{
        width: 16px;
        height: 16px;
        margin-bottom: 3px;
      }
      .footer_nav_container li span{
        font-size: 12px;
        color: #5a5a5a;
      }
      .orderList_headerTitle_container{
      	display: flex;
      	align-items: center;
      	justify-content: space-between;
      	padding: 0.3rem .4rem;
      	border-bottom: 1px solid #ececec;
      	background: #fbfbfb;
      }
      .orderList_headerTitle_container p{
      	font-size: .28rem;
      	color: #777;
      	font-weight: bold;
      }
      .orderList_headerTitle_container svg{
      	width: .4rem;
      	height: .4rem;
      	cursor: pointer;
      }
      .orderList_headerSearch_container{
      	display: flex;
      	align-items: center;
      	justify-content: space-between;
      	padding: 0.3rem .4rem;
      	border-bottom: 1px solid #ececec;
      }
      .orderList_headerSearch_container input{
      	outline: none;
      	appearance: none;
      	border: none;
      	font-size: .28rem;
      	color: #333;
      	flex: 1;
      	border-right: 1px solid #c7c7c7;
      }
      .orderList_headerSearch_container svg{
      	width: .4rem;
      	height: .4rem;
      	cursor: pointer;
      	margin-left: .3rem;
      }
      /*main*/
      .orderList_Main_container{

      }
      .orderList_List_container{
      	border-bottom: 1px solid #ececec;
      	padding-bottom: .1rem;
      }
      .orderList_List_container p{

      }
      .orderList_ListNum_container{
      	padding: 0rem .4rem .1rem .4rem;
          text-align: right;
      	align-items: center;
      	justify-content: space-between;
      }
      .orderList_ListNum_container p{
      	color: #333;
      	font-size: .28rem;
      }
      .orderList_ListNum_container span{
      	color: #666;
      	cursor: pointer;
      	font-size: .28rem;
      	flex: 1;
      	text-align: right;
      }
      .orderList_ListGoods_container{
      	display: flex;
      	align-items: center;
      	padding: 0 .4rem .1rem .4rem;
      }
      .orderList_ListGoods_container img{
      	width: 1rem;
      	height: 1rem;
      }
      .orderList_ListGoods_content{
      	flex: 1;
      	display: flex;
      	flex-direction: column;
      	justify-content: space-around;
      	height: 1rem;
      	padding-left: .2rem;
      	overflow: hidden;
      }
      .orderList_ListGoods_content h3{
      	font-size: .28rem;
      	color: #333;
      	overflow: hidden;
      	text-overflow: ellipsis;
      	white-space: nowrap;
      }
      .orderList_ListGoods_content h4{
      	font-size: .26rem;
      	color: #828282;
      }
      .orderList_ListState_container{
      	display: flex;
      	align-items: center;
      	padding: .2rem .4rem;
      }
      .orderList_ListState_container p{
      	color: #1890ff;
      	font-size: 0.28rem;
      }
      .orderList_ListState_content{
      	display: flex;
      	align-items: center;
      	flex: 1;
      	overflow: hidden;
      }
      .orderList_ListState_content span{
      	color: #333;
      	font-size: .28rem;
      	overflow: hidden;
      	text-overflow: ellipsis;
      	white-space: nowrap;
      	flex: 1;
      }
      .orderList_ListState_content svg{
      	width: .3rem;
      	height: .3rem;
      	margin-right: .1rem;
      	fill: #888;
      }
      .orderList_ListNoData_container p{
      	text-align: center;
      	padding: .2rem 0;
      	font-size: .28rem;
      	color: #888;
      }
      /*版权信息*/
      .public_copyright_content{
        position: relative;
        margin: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(http://weidogstest.oss-cn-beijing.aliyuncs.com/0d118b616ad13e1f874e458c8310be76.png)no-repeat center center;
      }
      .public_copyright_content p{
        background: #fff;
        font-size: 13px;
        color: #999;
        line-height: 17px;
        text-align: center;
        padding: 0 5px;
      }
     .layui-btn{
          height: 24px;
          line-height: 24px;
     }
     .orderList_ListNum_containers{
          display: flex;
     }
    </style>
  </head>
  <body>
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li class="layui-this"><a href="#">用户足迹</a></li>
        <li ><a href="order_list.html?etUserId={$etUserId}&wid={$wid}&userId={$userId}&unionid={$unionid}">用户订单</a></li>
      </ul>
    </div>
    <div id="orderList_Main_container" class="orderList_Main_container">
    	<!-- 列表 -->
      {if $history}
      {loop $history['list'] as $history}
    	<div class="orderList_List_container">
    		<div class="orderList_ListGoods_container">
    			<img src="{$history['goods']['thumb']}">
    			<div class="orderList_ListGoods_content">
    				<h3>{$history["goods"]["title"]}</h3>
            <h4>价格:￥{$history["goods"]["price"]}</h4>
    			</div>
    		</div>
    		<div class="orderList_ListNum_container">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="sendChatMessage('{$history["goods"]["title"]}','{$history["goods"]["thumb"]}','{$history["wxapp_url"]}')">发送订单</button>
    		</div>
    	</div>
      {/loop}
      {/if}
    </div>
    <!-- 版权 -->
    <div class="public_copyright_container">
      <div class="public_copyright_content">
        <p>{$copyright}</p>
      </div>
    </div>
    <div class="footer_nav_container">
      <ul class="footer_nav_container">
        <li>
          <a href="order_list.html?wid={$wid}&etUserId={$etUserId}&userId={$userId}&unionid={$unionid}">
            <i class="layui-icon layui-icon-list"></i>   
            <span style="color: #3787f6;">记录</span>
          </a>
        </li>
        <li>
          <a href="coupon.html?wid={$wid}&etUserId={$etUserId}&userId={$userId}&unionid={$unionid}">
            <i class="layui-icon layui-icon-star-fill"></i>
            <span>优惠券</span>
          </a>
        </li>
        <li>
          <a href="shop_list.html?wid={$wid}&etUserId={$etUserId}&userId={$userId}&unionid={$unionid}">
            <i class="layui-icon layui-icon-cart-simple"></i>
            <span>购物车</span>
          </a>
        </li>
      </ul>
    </div>
    <script src="/cdn/jquery.min.js"></script>
    <script src="/cdn/clipboard.js"></script>
    <script src="/js/ajax.js"></script>
    <script src="/layui/layui.js"></script>
    <!-- 复制粘贴 -->
    <script>
    	var clipboard = new ClipboardJS('.copyNum');

    	clipboard.on('success', function(e) {
    		alert('复制订单号成功');
    		console.info(e.text);
    	});

    	clipboard.on('error', function(e) {
    		console.error('Action:', e.action);
    		console.error('Trigger:', e.trigger);
    	});
    </script>
    
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
        wx.config({
          beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "{$wxConfig['appId']}", // 必填，企业微信的corpID
          timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
          nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
          signature: "{$wxConfig['signature']}",// 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['sendChatMessage'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
        wx.ready(function(){
          console.log('config success');
          wx.agentConfig({
            corpid: "{$corp_id}", // 必填，企业微信的corpid，必须与当前登录的企业一致
            agentid: "{$agent_id}", // 必填，企业微信的应用id （e.g. 1000247）
            timestamp: "{$agentConfig['timestamp']}", // 必填，生成签名的时间戳 
            nonceStr: "{$agentConfig['nonceStr']}", // 必填，生成签名的随机串
            signature: "{$agentConfig['signature']}",// 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['selectExternalContact','sendChatMessage'], //必填
            success: function(res) {
              console.log('agentConfig success');
              wx.checkJsApi({
                jsApiList: ['sendChatMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                  
                }
              });
            },
            fail: function(res) {
              if(res.errMsg.indexOf('function not exist') > -1){
                console.log('版本过低请升级')
              }
            }
          });
        });
        wx.error(function(res){
          console.log('error'+res);
        });

        function sendChatMessage(title,imgUrl,url){
               wx.invoke('sendChatMessage', {
               msgtype:"miniprogram",
               miniprogram: {
                    appid: "{$set->appid}",
                    title: title,
                    imgUrl: imgUrl,
                    page: url,
               }
               }, function(res) {
                    if (res.err_msg == 'sendChatMessage:ok') {
                    //发送成功
                    }
               })
        }        
    </script>
    <script type="text/javascript">
        var page=2;
        var is_more = true;
        $(window).scroll(function(){
           var wid={$wid};
           var unionid="{$unionid}";
           var scrollTop=$(this).scrollTop();
           var scrollHeight=$(document).height();
           var windowHeight=$(this).height();
           if(is_more && scrollTop+windowHeight==scrollHeight){
            loadmore(wid,unionid);
           }
        })

        function loadmore(wid,unionid){
          url = 'get_next_history.html?wid='+wid+'&unionid='+unionid+'&page='+page;
          $.ajax({
            type: "get",
            url: url,
            data: {},
            dataType: "json",
            success: function (data) {
                page = data.page + 1
                if(data.error==0){
                  //遍历json数据，组装下拉选框添加到html中
                  if(data.list.length>0){
                    $.each(data.list, function (i, item) {
                        let html="";
                        html += '<div class="orderList_List_container">';
                        html += '<div class="orderList_ListGoods_container">';
                        html +=  '<img src="'+item.goods.thumb+'">';
                        html += '<div class="orderList_ListGoods_content">';
                        html += '<h3>'+item.goods.title+'</h3>';
                        html +=  '<h4>价格:￥'+item.goods.price+'</h4>';
                        html +=  '</div>';
                        html +=  '</div>';
                        html +=  '<div class="orderList_ListNum_container">';
                        html +=    '<button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="sendChatMessage(\''+item.goods.name+'\',\''+item.goods.thumb+'\',\''+item.wxapp_url+'\')">发送订单</button>';
                        html +=  '</div>';
                        html += '</div>';
                        $("#orderList_Main_container").append(html);
                    });

                  }else{
                    is_more = false
                    if($(".orderList_ListNoData_container").length == 0){
                      let html = "";
                       html +=  '<div class="orderList_ListNoData_container">';
                       html +=    '<p>没有更多了~</p>';
                       html +=  '</div>';
                       $("#orderList_Main_container").append(html);
                    }
                  }
                }else{
                  console.log(1111)
                }
            }
          });
        }
    </script>
  </body>
</html>
